<template  slot="title">
  <div class="helpCenter" style="height:100%">
    <el-container style="height:100%" >
      <el-aside width="200px" >
        <div style="width: 100%;text-align: left;padding-bottom: 8px">
          <el-link target="_blank"  @click="setData(0)">
            <h3 style="padding-bottom: 8px">入门指南</h3>
          </el-link>
        </div>
        <div style="width: 100%;text-align: left;padding-bottom: 8px">
          <el-link target="_blank"  @click="setData(1)">
            <a style="font-size:16px ">简介</a>
          </el-link>
        </div>
        <div style="width: 100%;text-align: left;padding-bottom: 8px">
          <el-link target="_blank"  @click="setData(2)">
            <a style="font-size:16px ">注册与登录</a>
          </el-link>
        </div>
        <div style="width: 100%;text-align: left;padding-bottom: 8px">
          <el-link target="_blank"  @click="setData(3)">
            <a style="font-size:16px ">入门必读</a>
          </el-link>
        </div>
        <div style="width: 100%;text-align: left;padding-bottom: 16px">
          <el-link target="_blank"  @click="setData(4)">
            <a style="font-size:16px ">账户管理</a>
          </el-link>
        </div>
        <div style="width: 100%;height:100%;text-align: left;padding-bottom: 8px">
          <el-link target="_blank"  @click="setData(5)">
            <h3 style="padding-bottom: 8px">编辑器指南</h3>
          </el-link>
        </div>
      </el-aside>
      <el-main >
        <el-table :data="Data" style="border: 1px #000000 solid;width: 90%;height:360%;padding: 16px;">
          <el-table-column prop="explain" label="欢迎光临帮助中心"></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>
<script>

export default {
  name: 'Laucher',
  data() {
    return {
      countDown: 5,
      timer: null,
      selectedCommand:'',//用于存储选中的命令
      dataSets:[
        [
          {
            explain: <div></div>
          }
        ], [
          {
            explain: '简介'
          }
        ], [
          {
            explain: '注册与登录'
          }
        ], [
          {
            explain:'入门必读'
          }
        ], [
          {
            explain:'账户管理'
          }
        ], [
          {
            explain: <div>
              <body>
              <div className="container">
                <div className="rule">
                  <img src="https://coscdn.htmlpage.cn/user-upload-images/9920/helpCenter0.jpg" width="90%" />
                </div>
                <div className="rule" style={{width: '70%', padding: '10px'}}>
                  <div ><p>左侧为区块管理器,包含了创建网页的基本组件，并根据组件的特征进行了分组。
                    您可以根据需求选择对应的组件，通过鼠标拖拽到工作区完成网页的创建</p></div>
                </div>
              </div>
              <div className="container">
                <div className="rule">
                  <img src="https://coscdn.htmlpage.cn/user-upload-images/9920/helpCenter2.jpg" width="90%"/>
                </div>
                <div className="rule" style={{width: '90%', padding: '10px'}}>
                  <div ><p>工作区上方靠右侧的按钮，从左到右依次是组件框显示按钮(将组件的边界以虚线显示以此区分不同组件)、
                    预览按钮(会隐藏面板进入预览界面)、全屏操作按钮、代码模板展示按钮(展示转义的html和css代码)、
                    撤销按钮、取消撤销按钮、清空画布按钮、切换拖拽方式按钮(选中画布内组件会切换成absolute布局，可随意拖拽布局)。
                  </p></div>
                </div>
              </div>
              <div className="container">
                <div className="rule">
                  <img src="https://coscdn.htmlpage.cn/user-upload-images/9920/hekpCenter3.jpg" width="90%"/>
                </div>
                <div className="rule" style={{width: '90%', padding: '10px'}}>
                  <div ><p>右侧管理区第一个为样式编辑区，可以二次设计组件样式，包括许多样式属性可以设置(但有的自定义组件固定了某些样式可能无法更改)；
                    设置管理员，可以设置组件的一些暴露的属性，类似vue自定义组件的prop中的属性，一般包含title和id；层管理区，可以查看布局中组件的层级关系，
                    有时在布局中无法拖动某些组件，可以通过在层管理区拖动布局，还可以隐藏某些组件(这里点击隐藏，在导出的标签样式中会设置display为none)。
                  </p>
                  </div>
                </div>
              </div>
              <div className="container">
                <div className="rule">
                  <img src="https://coscdn.htmlpage.cn/user-upload-images/9920/helpCenter4.jpg" width="90%"/>
                </div>
                <div className="rule" style={{width: '100%', padding: '10px'}}>
                  <div >
                    <p>
                      另外，组件中有工具按钮，↑按钮表示选中上一层级组件，第二个为拖动按钮(长按操作)、第三个为复制按钮、第四个为删除按钮。
                    </p>
                  </div>
                </div>
              </div>
              </body>
            </div>
          }
        ],
      ],//表格对应的数据
      Data: [],
      DataSetIndex: 0,//初始数据索引设置为0
    }
  },
  methods: {
    setData(index) {
      if (index >= 0 && index < this.dataSets.length) {
        this.DataSetIndex = index;
        this.Data = [...this.dataSets[index]]; // 使用扩展运算符来复制数组
      }
    },
  },

  mounted() {//构造函数
    this.selectedCommand = 'setData(0)';
    // if (true) {
    // this.$router.replace('/Main')
    // } else {
    // this.$router.replace('/login')
    // }
  }

}

</script>

<style scoped>

body {
  margin: 10px;
}
.container {
  align: center;
  display: flex;
  flex-direction: column;
  margin:25px;
  align-items: center;
  justify-content: center;
  padding-top:10px;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;
}

.rule  {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.left-div img {
  width: 100%;
  height: auto;
}


#Laucher {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>